WCAG 2.1ã¬ã€ãã©ã€ã³ãçè§£ã»å®è£ ããäžçäžã®å©çšè ã®ããã®ã¢ã¯ã»ã·ãã«ãªããžã¿ã«äœéšãåµåºããã¹ãæŠç¥ãšå®è·µçãªå®è£ ã®ãã³ãã解説ããŸãã
WCAG 2.1æºæ ïŒãã¹ããšå®è£ ã®ããã®ã°ããŒãã«ã¬ã€ã
ãŸããŸãçžäºæ¥ç¶ãé²ãäžçã«ãããŠãããžã¿ã«ã¢ã¯ã»ã·ããªãã£ã®ç¢ºä¿ã¯åãªãã³ã³ãã©ã€ã¢ã³ã¹ã®åé¡ã§ã¯ãªããåºæ¬çãªè²¬ä»»ã§ããWeb Content Accessibility Guidelines (WCAG) 2.1ã¯ãé害ã®ãã人ã ããŠã§ãã³ã³ãã³ããããå©çšããããããããã®ãäžççã«èªããããåºæºãæäŸããŸãããã®å æ¬çãªã¬ã€ãã§ã¯ãWCAG 2.1æºæ ã«ã€ããŠãäžçäžã®å©çšè ã察象ãšãããã¹ãæŠç¥ãšå®è·µçãªå®è£ ã¢ãããŒããåãäžããŸãã
WCAG 2.1ãšã¯ïŒ
WCAG 2.1ã¯ãWorld Wide Web Consortium (W3C)ãWeb Accessibility Initiative (WAI)ã®äžç°ãšããŠçå®ãããåœéçã«èªããããäžé£ã®ã¬ã€ãã©ã€ã³ã§ããããã¯WCAG 2.0ãåºç€ãšããŠæ§ç¯ãããŠãããç¹ã«èªç¥ã»åŠç¿é害ã®ãããŠãŒã¶ãŒãããŒããžã§ã³ã®ãŠãŒã¶ãŒãã¢ãã€ã«ããã€ã¹ã§ãŠã§ãã«ã¢ã¯ã»ã¹ãããŠãŒã¶ãŒãªã©ãé²åããã¢ã¯ã»ã·ããªãã£ã®ããŒãºã«å¯Ÿå¿ããŠããŸãã
WCAG 2.1ã¯ãPOURãšããé åèªã§èŠãããã4ã€ã®äž»èŠãªååã«åºã¥ããŠæ§æãããŠããŸãïŒ
- ç¥èŠå¯èœ (Perceivable): æ å ±ããã³ãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ã®ã³ã³ããŒãã³ãã¯ããŠãŒã¶ãŒãç¥èŠã§ããæ¹æ³ã§æç€ºå¯èœã§ãªããã°ãªããŸãããããã«ã¯ãéããã¹ãã³ã³ãã³ãã«å¯Ÿãã代æ¿ããã¹ãã®æäŸãåç»ã«å¯Ÿãããã£ãã·ã§ã³ã®ä»äžãååãªè²ã®ã³ã³ãã©ã¹ãã®ç¢ºä¿ãªã©ãå«ãŸããŸãã
- æäœå¯èœ (Operable): ãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ã®ã³ã³ããŒãã³ãããã³ããã²ãŒã·ã§ã³ã¯ãæäœå¯èœã§ãªããã°ãªããŸãããããã«ã¯ãããŒããŒãã§ã®ã¢ã¯ã»ã·ããªãã£ãã³ã³ãã³ããèªãã§äœ¿çšããããã®ååãªæéã®æäŸãçºäœãåŒãèµ·ããå¯èœæ§ã®ããã³ã³ãã³ãã®åé¿ãªã©ãå«ãŸããŸãã
- çè§£å¯èœ (Understandable): æ å ±ããã³ãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ã®æäœã¯ãçè§£å¯èœã§ãªããã°ãªããŸãããããã¯ãæç¢ºã§å¹³æãªèšèªã®äœ¿çšãäºæž¬å¯èœãªããã²ãŒã·ã§ã³ã®æäŸããŠãŒã¶ãŒãééããåé¿ã»ä¿®æ£ããã®ãå©ããããšãªã©ãæå³ããŸãã
- å ç¢ïŒããã¹ãïŒ (Robust): ã³ã³ãã³ãã¯ãæ¯æŽæè¡ãå«ãå€çš®å€æ§ãªãŠãŒã¶ãŒãšãŒãžã§ã³ãã«ãã£ãŠç¢ºå®ã«è§£éãããã®ã«ååå ç¢ã§ãªããã°ãªããŸãããããã«ã¯ãæå¹ãªHTMLã®äœ¿çšããã¢ã¯ã»ã·ããªãã£ã«é¢ããã³ãŒãã£ã³ã°ãã©ã¯ãã£ã¹ã®éµå®ãå«ãŸããŸãã
ãªãWCAG 2.1æºæ ã¯éèŠãªã®ãïŒ
WCAG 2.1ãžã®æºæ ã¯ãããã€ãã®éèŠãªå©ç¹ããããããŸãïŒ
- æ³çèŠä»¶: å€ãã®åœãå°åã§ã¯ããŠã§ãã¢ã¯ã»ã·ããªãã£ã矩åä»ããæ³åŸãèŠå¶ãããããã°ãã°WCAGãåç §ãããŸããäŸãã°ãç±³åœã®é害ãæã€ã¢ã¡ãªã«äººæ³ïŒADAïŒãç±³åœé£éŠæ¿åºã®ã»ã¯ã·ã§ã³508ãã«ããã®ãªã³ã¿ãªãªå·é害è ã¢ã¯ã»ã·ããªãã£æ³ïŒAODAïŒããšãŒãããã®EN 301 549ãªã©ã¯ããã¹ãŠWCAGåºæºãèŠæ±ãŸãã¯åç §ããŠããŸããæºæ ãæ ããšãæ³çæªçœ®ãè©å€ã®äœäžã«ã€ãªããå¯èœæ§ããããŸãã
- åžå ŽãªãŒãã®æ¡å€§: ãŠã§ããµã€ããã¢ã¯ã»ã·ãã«ã«ããããšã§ãäžçäžã®äœçŸäžäººãã®é害ã®ãã人ã ãå«ããããå¹ åºãå©çšè ã«éæžãéãããšã«ãªããŸããããã¯ããã©ãã£ãã¯ããšã³ã²ãŒãžã¡ã³ãããããŠæœåšçãªåçã®å¢å ã«ã€ãªãããŸãã
- ãã¹ãŠã®ãŠãŒã¶ãŒã«ãšã£ãŠã®ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹åäž: ã¢ã¯ã»ã·ããªãã£ã®æ¹åã¯ãé害ã®ãããŠãŒã¶ãŒã ãã§ãªãããã¹ãŠã®ãŠãŒã¶ãŒã«å©çãããããããšããããããŸããäŸãã°ãæç¢ºã§ç°¡æœãªæç« ãããæ§æãããã³ã³ãã³ããããŒããŒãããã²ãŒã·ã§ã³ã¯ã誰ã«ãšã£ãŠããŠã§ããµã€ãã䜿ããããããŸãã
- å«ççé æ ®: ãªã³ã©ã€ã³äžã®æ å ±ããµãŒãã¹ãžã®å¹³çãªã¢ã¯ã»ã¹ã確ä¿ããããšã¯ã瀟äŒç責任ã®åé¡ã§ããWCAG 2.1æºæ ã¯ãã€ã³ã¯ã«ãŒãžã§ã³ãšå ¬å¹³æ§ãšããå«çååã«åèŽããŠããŸãã
- SEOã®åŒ·å: æ€çŽ¢ãšã³ãžã³ã¯ãåªãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸãããŠã§ããµã€ãã奜ã¿ãŸããã¢ã¯ã»ã·ããªãã£ã®ãã¹ããã©ã¯ãã£ã¹ãå®è£ ããããšã§ããŠã§ããµã€ãã®æ€çŽ¢ãšã³ãžã³ã©ã³ãã³ã°ãåäžãããããšãã§ããŸãã
WCAG 2.1éæåºæºïŒè©³çŽ°è§£èª¬
WCAG 2.1ã®éæåºæºã¯ãåã¬ã€ãã©ã€ã³ãæºããæ¹æ³ãå®çŸ©ããããã¹ãå¯èœãªèšè¿°ã§ãããããã¯3ã€ã®é©åã¬ãã«ã«åé¡ãããŸãïŒ
- ã¬ãã«A: æãåºæ¬çãªã¢ã¯ã»ã·ããªãã£ã®ã¬ãã«ããããã®åºæºãæºããããšã¯ãäžéšã®ãŠãŒã¶ãŒããŠã§ããµã€ããå©çšã§ããããã«ããããã«äžå¯æ¬ ã§ãã
- ã¬ãã«AA: é害ã®ãããŠãŒã¶ãŒã«ãšã£ãŠæãäžè¬çãªéå£ã«å¯ŸåŠããŸããã¬ãã«AAã¯ãæ³çãªæºæ ã®ç®æšã¬ãã«ãšãããããšããããããŸãã
- ã¬ãã«AAA: æé«ã¬ãã«ã®ã¢ã¯ã»ã·ããªãã£ãåžžã«å®å šã«éæããããšãå¯èœãšã¯éããŸããããã¬ãã«AAAã®åºæºãæºããããšã§ãããåºç¯ãªãŠãŒã¶ãŒã®ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãå€§å¹ ã«åäžãããããšãã§ããŸãã
以äžã«ãç°ãªãã¬ãã«ã«ãããWCAG 2.1éæåºæºã®äŸãããã€ã瀺ããŸãïŒ
ã¬ãã«Aã®äŸïŒ
- 1.1.1 éããã¹ãã³ã³ãã³ã: ãã¹ãŠã®éããã¹ãã³ã³ãã³ãã«ã¯ããŠãŒã¶ãŒãå¿ èŠãšããä»ã®åœ¢åŒïŒäŸïŒæ¡å€§æåãç¹åãé³å£°ãèšå·ãããå¹³æãªèšèªïŒã«å€æŽã§ããããã«ã代æ¿ããã¹ããæäŸããŸããäŸïŒç»åã®å 容ã説æããaltããã¹ãã远å ããã
- 1.3.1 æ å ±åã³é¢ä¿æ§: 衚çŸãéããŠäŒããããæ å ±ãæ§é ãããã³é¢ä¿æ§ã¯ãããã°ã©ã ãè§£éå¯èœã§ãããããŸãã¯ããã¹ãã§å©çšã§ããŸããäŸïŒèŠåºãã«ã¯<h1>ïœ<h6>ããªã¹ãã«ã¯<ul>ã<ol>ã®ãããªã»ãã³ãã£ãã¯ãªHTMLèŠçŽ ã䜿çšããã
- 2.1.1 ããŒããŒã: ã³ã³ãã³ãã®ãã¹ãŠã®æ©èœã¯ãåã ã®ããŒã¹ãããŒã¯ã«ç¹å®ã®ã¿ã€ãã³ã°ãèŠæ±ããããšãªããããŒããŒãã€ã³ã¿ãŒãã§ãŒã¹ãéããŠæäœå¯èœã§ããäŸïŒãã¿ã³ããªã³ã¯ãªã©ã®ãã¹ãŠã®ã€ã³ã¿ã©ã¯ãã£ããªèŠçŽ ããããŒããŒãã ãã§ã¢ã¯ã»ã¹ããã¢ã¯ãã£ãã«ã§ããããšã確èªããã
ã¬ãã«AAã®äŸïŒ
- 1.4.3 ã³ã³ãã©ã¹ãïŒæäœéïŒ: ããã¹ãããã³æåç»åã®èŠèŠç衚çŸã«ã¯ãå°ãªããšã4.5:1ã®ã³ã³ãã©ã¹ãæ¯ããããŸããäŸïŒããã¹ããšèæ¯è²ã®éã«ååãªè²ã®ã³ã³ãã©ã¹ãã確ä¿ãããWebAIMã®Contrast Checkerã®ãããªããŒã«ã圹ç«ã¡ãŸãã
- 2.4.4 ãªã³ã¯ã®ç®çïŒã³ã³ããã¹ãå ïŒ: åãªã³ã¯ã®ç®çã¯ããªã³ã¯ã®ç®çãäžè¬ã®ãŠãŒã¶ãŒã«ãšã£ãŠææ§ã§ããå Žåãé€ãããªã³ã¯ããã¹ãåç¬ã§ããŸãã¯ããã°ã©ã ãè§£éå¯èœãªãªã³ã¯ã®ã³ã³ããã¹ããšåãããŠå€æã§ããŸããäŸïŒããããã¯ãªãã¯ãã®ãããªäžè¬çãªãªã³ã¯ããã¹ããé¿ãããWCAG 2.1ã«ã€ããŠè©³ããèªããã®ãããªèª¬æçãªããã¹ãã䜿çšããã
- 3.1.1 ããŒãžã®èšèª: åããŒãžã®ããã©ã«ãã®èªç¶èšèªã¯ãããã°ã©ã ãè§£éå¯èœã§ããäŸïŒããŒãžã®èšèªãæå®ããããã«<html lang="ja">屿§ã䜿çšãããå€èšèªãµã€ãã®å Žåã¯ãç°ãªãã»ã¯ã·ã§ã³ã«ç°ãªãèšèªå±æ§ã䜿çšããã
ã¬ãã«AAAã®äŸïŒ
- 1.4.6 ã³ã³ãã©ã¹ãïŒæ¡åŒµïŒ: ããã¹ãããã³æåç»åã®èŠèŠç衚çŸã«ã¯ãå°ãªããšã7:1ã®ã³ã³ãã©ã¹ãæ¯ããããŸããäŸïŒããã¯ã¬ãã«AAãããé«ãã³ã³ãã©ã¹ãèŠä»¶ã§ãããããé床ã®èŠèŠé害ãæã€ãŠãŒã¶ãŒã«é©ããŠããŸãã
- 2.2.3 ã¿ã€ãã³ã°éäŸå: éã€ã³ã¿ã©ã¯ãã£ããªåæã¡ãã£ã¢ããªã¢ã«ã¿ã€ã ã®ã€ãã³ããé€ããã¿ã€ãã³ã°ã¯ã³ã³ãã³ãã«ãã£ãŠæç€ºãããã€ãã³ããæŽ»åã®æ¬è³ªçãªéšåã§ã¯ãããŸãããäŸïŒãŠãŒã¶ãŒãã€ã³ã¿ã©ã¯ãã£ããªèŠçŽ ã®æéå¶éãäžæåæ¢ã忢ããŸãã¯å»¶é·ã§ããããã«ããã
- 3.1.3 çããåèª: ã€ãã£ãªã ãå°éçšèªãªã©ãéåžžãšã¯ç°ãªãããŸãã¯éå®ãããæ¹æ³ã§äœ¿çšãããåèªããã¬ãŒãºã®ç¹å®ã®å®çŸ©ãç¹å®ããããã®ã¡ã«ããºã ãå©çšã§ããŸããäŸïŒå°éçšèªãã¹ã©ã³ã°ã説æããããã«çšèªéãããŒã«ããããæäŸããã
WCAG 2.1æºæ ã®ããã®ãã¹ãæŠç¥
WCAG 2.1æºæ ã確å®ã«ããããã«ã¯ã培åºçãªãã¹ããäžå¯æ¬ ã§ããèªåãã¹ããšæåãã¹ãã®æ¹æ³ãçµã¿åãããããšãæšå¥šãããŸãã
èªåãã¹ãïŒ
èªåãã¹ãããŒã«ã¯ãaltããã¹ãã®æ¬ èœãäžååãªè²ã®ã³ã³ãã©ã¹ãããªã³ã¯åããªã©ãäžè¬çãªã¢ã¯ã»ã·ããªãã£ã®åé¡ãè¿ éã«ç¹å®ã§ããŸãããããã®ããŒã«ã¯ãŠã§ããµã€ãå šäœãã¹ãã£ã³ããæœåšçãªåé¡ã匷調衚瀺ããã¬ããŒããçæã§ããŸããããããèªåãã¹ãã ãã§ã¯ååã§ã¯ãããŸãããç¹ã«ãŠãŒã¶ããªãã£ãã³ã³ããã¹ãã«é¢é£ããã¢ã¯ã»ã·ããªãã£ã®åé¡ã¯æ€åºã§ããªãããã§ãã
èªåãã¹ãããŒã«ã®äŸïŒ
- WAVE (Web Accessibility Evaluation Tool): ã¢ã¯ã»ã·ããªãã£ã®åé¡ã«é¢ããèŠèŠçãªãã£ãŒãããã¯ãæäŸããç¡æã®ãã©ãŠã¶æ¡åŒµæ©èœããã³ãªã³ã©ã€ã³ããŒã«ã
- AXE (Accessibility Engine): èªåãã¹ãã®ã¯ãŒã¯ãããŒã«çµ±åã§ãããªãŒãã³ãœãŒã¹ã®JavaScriptã©ã€ãã©ãªã
- Lighthouse (Google Chrome DevTools): ã¢ã¯ã»ã·ããªãã£ãå«ããŠã§ãããŒãžã®å質ãåäžãããããã®èªåããŒã«ã
- Tenon.io: 詳现ãªã¢ã¯ã»ã·ããªãã£ã¬ããŒããæäŸããæ§ã ãªéçºããŒã«ãšçµ±åã§ããææãµãŒãã¹ã
èªåãã¹ãã®ãã¹ããã©ã¯ãã£ã¹ïŒ
- éçºã¯ãŒã¯ãããŒã«èªåãã¹ããçµ±åããã
- ã³ãŒãã®å€æŽåŸãªã©ã宿çã«èªåãã¹ããå®è¡ããã
- è€æ°ã®èªåãã¹ãããŒã«ã䜿çšããŠãããå æ¬çãªè©äŸ¡ãåŸãã
- èªåãã¹ãã®çµæãããããªã調æ»ã®åºçºç¹ãšããŠæ±ãã
æåãã¹ãïŒ
æåãã¹ãã§ã¯ãé害ã®ãããŠãŒã¶ãŒã®èŠç¹ãããŠã§ãã³ã³ãã³ããšæ©èœã確èªããŸãããã®çš®ã®ãã¹ãã¯ããŠãŒã¶ããªãã£ã®åé¡ãããŒããŒãããã²ãŒã·ã§ã³ã®åé¡ãã»ãã³ãã£ãã¯ãªãšã©ãŒãªã©ãèªåããŒã«ã§ã¯æ€åºã§ããªãã¢ã¯ã»ã·ããªãã£ã®åé¡ãç¹å®ããããã«äžå¯æ¬ ã§ãã
æåãã¹ãã®ãã¯ããã¯ïŒ
- ããŒããŒãããã²ãŒã·ã§ã³ãã¹ãïŒ ãã¹ãŠã®ã€ã³ã¿ã©ã¯ãã£ããªèŠçŽ ãããŒããŒãã ãã§ã¢ã¯ã»ã¹ããã¢ã¯ãã£ãã«ã§ããããšã確èªããã
- ã¹ã¯ãªãŒã³ãªãŒããŒãã¹ãïŒ NVDAïŒç¡æã§ãªãŒãã³ãœãŒã¹ïŒãJAWSïŒåçšïŒãªã©ã®ã¹ã¯ãªãŒã³ãªãŒããŒã䜿çšããŠãèŠèŠé害ã®ãããŠãŒã¶ãŒãäœéšããã§ããããŠã§ããµã€ããäœéšãããããã«ã¯ãã³ã³ãã³ãã®èãåããèŠåºããã©ã³ãããŒã¯ã䜿çšããããã²ãŒã·ã§ã³ããã©ãŒã èŠçŽ ãšã®å¯Ÿè©±ãªã©ãå«ãŸããã
- æ¡å€§ãã¹ãïŒ ã¹ã¯ãªãŒã³ãã°ããã¡ã€ã¢ã䜿çšããŠãæ§ã ãªãºãŒã ã¬ãã«ã§ã®ãŠã§ããµã€ãã®ãŠãŒã¶ããªãã£ããã¹ããããã³ã³ãã³ããé©åã«ãªãããŒããæ å ±ã倱ãããªãããšã確èªããã
- ã«ã©ãŒã³ã³ãã©ã¹ããã¹ãïŒ ã«ã©ãŒã³ã³ãã©ã¹ãåæããŒã«ã䜿çšããŠãè²ã®ã³ã³ãã©ã¹ãæ¯ãæåã§ç¢ºèªããã
- èªç¥ã¢ã¯ã»ã·ããªãã£ãã¹ãïŒ ãŠã§ããµã€ãã§äœ¿çšãããŠããèšèªã®æçããšç°¡æœããè©äŸ¡ãããæç€ºãæç¢ºãã€ç°¡æœã§ãããã²ãŒã·ã§ã³ãäºæž¬å¯èœã§ããããšã確èªããã
é害ã®ãããŠãŒã¶ãŒã®åå ïŒ
ã¢ã¯ã»ã·ããªãã£ã確ä¿ããæã广çãªæ¹æ³ã¯ããã¹ãããã»ã¹ã«é害ã®ãããŠãŒã¶ãŒãåå ãããããšã§ããããã¯ããŠãŒã¶ãŒãã¹ãã»ãã·ã§ã³ããã©ãŒã«ã¹ã°ã«ãŒãããŸãã¯é害ã®ããã¢ã¯ã»ã·ããªãã£ã³ã³ãµã«ã¿ã³ãã«ããã¢ã¯ã»ã·ããªãã£ç£æ»ãéããŠè¡ãããšãã§ããŸãã圌ãã®å®äœéšã«åºã¥ããçµéšãšæŽå¯ã¯ãä»ã®æ¹æ³ã§ã¯èŠéããŠããŸãå¯èœæ§ã®ããã¢ã¯ã»ã·ããªãã£ã®åé¡ãç¹å®ãã察åŠããã®ã«åœ¹ç«ã€è²Žéãªãã£ãŒãããã¯ãæäŸããŠãããŸãã
ã¢ã¯ã»ã·ããªãã£ç£æ»ïŒ
ã¢ã¯ã»ã·ããªãã£ç£æ»ã¯ããŠã§ããµã€ããã¢ããªã±ãŒã·ã§ã³ã®å æ¬çãªè©äŸ¡ã§ãããã¢ã¯ã»ã·ããªãã£ã®éå£ãç¹å®ããWCAG 2.1ãžã®æºæ ãè©äŸ¡ããŸããç£æ»ã¯éåžžãèªåãã¹ããšæåãã¹ãã®ãã¯ããã¯ãçµã¿åãããŠäœ¿çšããã¢ã¯ã»ã·ããªãã£ã®å°éå®¶ã«ãã£ãŠå®æœãããŸããç£æ»ã¬ããŒãã«ã¯ãã¢ã¯ã»ã·ããªãã£ã®åé¡ã®è©³çްãªãªã¹ããšãä¿®æ£ã®ããã®æšå¥šäºé ãèšèŒãããŸãã
ã¢ã¯ã»ã·ããªãã£ç£æ»ã®çš®é¡ïŒ
- ããŒã¹ã©ã€ã³ç£æ»ïŒ ãŠã§ããµã€ãã®å šäœçãªã¢ã¯ã»ã·ããªãã£ã®å æ¬çãªè©äŸ¡ã
- ã¿ãŒã²ããç£æ»ïŒ ãŠã§ããµã€ãã®ç¹å®ã®é åãç¹å®ã®çš®é¡ã®ã¢ã¯ã»ã·ããªãã£ã®åé¡ã«çŠç¹ãåœãŠãã
- ãªã°ã¬ãã·ã§ã³ç£æ»ïŒ ã³ãŒãã®å€æŽãæŽæ°åŸã«æ°ããªã¢ã¯ã»ã·ããªãã£ã®åé¡ããªãããã§ãã¯ããã
WCAG 2.1æºæ ã®ããã®å®è£ æŠç¥
WCAG 2.1ãå®è£ ããã«ã¯ãç©æ¥µçãã€äœç³»çãªã¢ãããŒããå¿ èŠã§ããããã¯äžåºŠããã®ä¿®æ£ã§ã¯ãªããéçºã©ã€ããµã€ã¯ã«ã«çµ±åãããã¹ãç¶ç¶çãªããã»ã¹ã§ãã
èšç»ãšåªå é äœä»ãïŒ
- ã¢ã¯ã»ã·ããªãã£æ¹éã®çå®ïŒ çµç¹ã®ã¢ã¯ã»ã·ããªãã£ãžã®ã³ãããã¡ã³ããæç¢ºã«å®çŸ©ããã
- åæã¢ã¯ã»ã·ããªãã£ç£æ»ã®å®æœïŒ ãŠã§ããµã€ãã®çŸåšã®ã¢ã¯ã»ã·ããªãã£ç¶æ³ãç¹å®ããã
- ä¿®æ£äœæ¥ã®åªå é äœä»ãïŒ æãé倧ãªã¢ã¯ã»ã·ããªãã£ã®åé¡ã«æåã«åãçµããã¬ãã«Aã®åé¡ã¯ã¬ãã«AAã®åã«ãã¬ãã«AAã¯ã¬ãã«AAAã®åã«å¯Ÿå¿ãã¹ãã§ãã
- ã¢ã¯ã»ã·ããªãã£ããŒããããã®äœæïŒ WCAG 2.1æºæ ãéæããç¶æããããã«åãã¹ãã¹ãããã®æŠèŠããŸãšããã
éçºã¯ãŒã¯ãããŒãžã®ã¢ã¯ã»ã·ããªãã£ã®çµã¿èŸŒã¿ïŒ
- éçºè ãšãã¶ã€ããŒåãã®ã¢ã¯ã»ã·ããªãã£ãã¬ãŒãã³ã°ïŒ WCAG 2.1ã¬ã€ãã©ã€ã³ãšã¢ã¯ã»ã·ããªãã£ã®ãã¹ããã©ã¯ãã£ã¹ã«é¢ãããã¬ãŒãã³ã°ãæäŸããã
- ã¢ã¯ã»ã·ãã«ãªã³ãŒãã£ã³ã°ãã©ã¯ãã£ã¹ã®äœ¿çšïŒ ã»ãã³ãã£ãã¯ãªHTMLãèšè¿°ããARIA屿§ãé©åã«äœ¿çšããååãªè²ã®ã³ã³ãã©ã¹ãã確ä¿ããã
- ã¢ã¯ã»ã·ãã«ãªã³ã³ããŒãã³ããšã©ã€ãã©ãªã®éžæïŒ ã¢ã¯ã»ã·ãã«ã«èšèšãããæ§ç¯æžã¿ã®UIã³ã³ããŒãã³ããã©ã€ãã©ãªã䜿çšããã
- CI/CDãã€ãã©ã€ã³ãžã®ã¢ã¯ã»ã·ããªãã£ãã¹ãã®çµ±åïŒ ãã«ãããã»ã¹ã®äžéšãšããŠã¢ã¯ã»ã·ããªãã£ãã¹ããèªååããã
- 宿çãªã¢ã¯ã»ã·ããªãã£ã¬ãã¥ãŒã®å®æœïŒ 宿çã«ãŠã§ããµã€ããã¬ãã¥ãŒããé²åããŠãã¢ã¯ã»ã·ãã«ã§ããç¶ããããšã確èªããã
ã³ã³ãã³ãäœæã®ãã¹ããã©ã¯ãã£ã¹ïŒ
- ãã¹ãŠã®éããã¹ãã³ã³ãã³ãã«ä»£æ¿ããã¹ããæäŸããïŒ ç»åã«ã¯èª¬æçãªaltããã¹ãããåç»ã«ã¯ãã£ãã·ã§ã³ããé³å£°ãã¡ã€ã«ã«ã¯ãã©ã³ã¹ã¯ãªãããèšè¿°ããã
- æç¢ºã§ç°¡æœãªèšèªã䜿çšããïŒ å°éçšèªãæè¡çšèªãé¿ãããçè§£ããããå¹³æãªèšèã§æžãã
- ã³ã³ãã³ããè«ççã«æ§é åããïŒ èŠåºããå°èŠåºãããªã¹ãã䜿çšããŠã³ã³ãã³ããæŽçããã
- ãªã³ã¯ã説æçã§ããããšã確èªããïŒ ããããã¯ãªãã¯ãã®ãããªäžè¬çãªãªã³ã¯ããã¹ããé¿ããããªã³ã¯ã®ç®çãæç¢ºã«ç€ºã説æçãªããã¹ãã䜿çšããã
- ååãªè²ã®ã³ã³ãã©ã¹ããæäŸããïŒ ããã¹ããšèæ¯è²ã®éã«ååãªè²ã®ã³ã³ãã©ã¹ããããããšã確èªããã
- æ å ±äŒéã«è²ã ãã䜿çšããªãïŒ ããã¹ããèšå·ãªã©ãæ å ±ãçè§£ããããã®ä»£æ¿ææ®µãæäŸããã
æ¯æŽæè¡ã«é¢ããèæ ®äºé ïŒ
- ã¹ã¯ãªãŒã³ãªãŒããŒïŒ ã³ã³ãã³ããã»ãã³ãã£ãã¯ã«æ§é åãããARIA屿§ãæ£ãã䜿çšãããŠããããšã確èªãããã¹ã¯ãªãŒã³ãªãŒããŒã¯ã³ãŒãã®è§£éãç°ãªããããè€æ°ã®ã¹ã¯ãªãŒã³ãªãŒããŒïŒNVDA, JAWS, VoiceOverïŒã§ãã¹ãããã
- ã¹ã¯ãªãŒã³ãã°ããã¡ã€ã¢ïŒ ãªãããŒãèæ ®ããŠèšèšãããã³ã³ãã³ãã¯ãæ¡å€§æã«æ å ±ãæ©èœã倱ãããšãªãé©å¿ããå¿ èŠãããã
- é³å£°èªèãœãããŠã§ã¢ïŒäŸïŒDragon NaturallySpeakingïŒïŒ ãã¹ãŠã®æ©èœãé³å£°ã³ãã³ãã§ã¢ã¯ãã£ãã«ã§ããããšã確èªããããã©ãŒã èŠçŽ ã«é©åã«ã©ãã«ãä»ããã
- 代æ¿å ¥åããã€ã¹ïŒäŸïŒã¹ã€ããããã€ã¹ïŒïŒ ããŒããŒãã¢ã¯ã»ã·ããªãã£ãšã«ã¹ã¿ãã€ãºå¯èœãªããŒããŒãã·ã§ãŒãã«ããã確ä¿ããã
ã°ããŒãã«ãªèæ ®äºé ïŒ
- èšèªïŒ ã³ã³ãã³ãã®èšèªãæå®ããããã« `lang` 屿§ãæ£ãã䜿çšãããå€èšèªã®ã³ã³ãã³ãã«ã¯ç¿»èš³ãæäŸããã
- æåã»ããïŒ å¹ åºãæåããµããŒãããããã«UTF-8ãšã³ã³ãŒãã£ã³ã°ã䜿çšããã
- æ¥ä»ãšæå»ã®åœ¢åŒïŒ åœéæšæºã®æ¥ä»ãšæå»ã®åœ¢åŒïŒäŸïŒISO 8601ïŒã䜿çšããã
- éè²šïŒ å¯Ÿè±¡ãšãªãå©çšè ã«é©ããé貚èšå·ãšã³ãŒãã䜿çšããã
- æåçãªé æ ®ïŒ æåçãªéãã«æ³šæããäžå¿«æãäžãããäžé©åã§ãã£ããããå¯èœæ§ã®ããç»åãèšèã®äœ¿çšãé¿ãããäŸãã°ãç¹å®ã®è²ãèšå·ã¯æåã«ãã£ãŠç°ãªãæå³ãæã€å Žåãããã
äŸïŒã¢ã¯ã»ã·ãã«ãªãã©ãŒã ã®å®è£
ã¢ã¯ã»ã·ãã«ãªãã©ãŒã ã¯ããŠãŒã¶ãŒãšã®å¯Ÿè©±ã«ãããŠéåžžã«éèŠã§ãã以äžã«ãã®å®è£ æ¹æ³ã瀺ããŸãïŒ
- <label>èŠçŽ ã®äœ¿çšïŒ `for` 屿§ã䜿çšããŠãã©ãã«ããã©ãŒã ãã£ãŒã«ãã«é¢é£ä»ãããããã«ããããã£ãŒã«ãã®ç®çãæç¢ºã«èª¬æãããã
- å¿ èŠã«å¿ããŠARIA屿§ã®äœ¿çšïŒ ã©ãã«ããã©ãŒã ãã£ãŒã«ãã«çŽæ¥é¢é£ä»ããããªãå Žåã`aria-label` ã `aria-describedby` ã®ãããªARIA屿§ã䜿çšããŠè¿œå æ å ±ãæäŸããã
- æç¢ºãªãšã©ãŒã¡ãã»ãŒãžã®æäŸïŒ ãŠãŒã¶ãŒãç¡å¹ãªããŒã¿ãå ¥åããå Žåããšã©ãŒãä¿®æ£ããæ¹æ³ãäŒããæç¢ºã§å ·äœçãªãšã©ãŒã¡ãã»ãŒãžãæäŸããã
- fieldsetãšlegendèŠçŽ ã®äœ¿çšïŒ `<fieldset>` ãš `<legend>` èŠçŽ ã䜿çšããŠãé¢é£ãããã©ãŒã ãã£ãŒã«ããã°ã«ãŒãåãããã®ã°ã«ãŒãã®èª¬æãæäŸããã
- ããŒããŒãã¢ã¯ã»ã·ããªãã£ã®ç¢ºä¿ïŒ ãŠãŒã¶ãŒãããŒããŒãã ãã§ãã©ãŒã ãã£ãŒã«ãéãç§»åã§ããããã«ããã
HTMLã®äŸïŒ
<form>
<fieldset>
<legend>é£çµ¡å
æ
å ±</legend>
<label for="name">ååïŒ</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">ã¡ãŒã«ã¢ãã¬ã¹ïŒ</label>
<input type="email" id="email" name="email" required aria-describedby="emailHelp"><br>
<small id="emailHelp">ã客æ§ã®ã¡ãŒã«ã¢ãã¬ã¹ã第äžè
ãšå
±æããããšã¯ãããŸããã</small><br><br>
<button type="submit">éä¿¡</button>
</fieldset>
</form>
WCAG 2.1æºæ ã®ç¶æ
WCAG 2.1æºæ ã¯äžåºŠéæããã°çµããã§ã¯ãããŸãããç¶ç¶çãªããã»ã¹ã§ãããŠã§ããµã€ããã¢ããªã±ãŒã·ã§ã³ã¯åžžã«é²åããŠããããã宿çã«ã¢ã¯ã»ã·ããªãã£ã®åé¡ãç£èŠã»ãã¹ãããããšãéèŠã§ãã
宿çãªç£èŠãšãã¹ãïŒ
- 宿çãªã¢ã¯ã»ã·ããªãã£ç£æ»ã®ã¹ã±ãžã¥ãŒã«ã確ç«ããã
- éçºã¯ãŒã¯ãããŒã«èªåã¢ã¯ã»ã·ããªãã£ãã¹ããçµ±åããã
- ãŠãŒã¶ãŒã«ã¢ã¯ã»ã·ããªãã£ã®åé¡ãå ±åããããä¿ãã
- ææ°ã®ã¢ã¯ã»ã·ããªãã£ã¬ã€ãã©ã€ã³ãšãã¹ããã©ã¯ãã£ã¹ãåžžã«ææ¡ããã
ãã¬ãŒãã³ã°ãšæèåäžïŒ
- ãŠã§ããµã€ãã®éçºãšä¿å®ã«é¢ãããã¹ãŠã®åŸæ¥å¡ã«ãç¶ç¶çãªã¢ã¯ã»ã·ããªãã£ãã¬ãŒãã³ã°ãæäŸããã
- çµç¹å šäœã§ã¢ã¯ã»ã·ããªãã£ãžã®æèãé«ããã
- ã€ã³ã¯ã«ãŒãžã§ã³ãšã¢ã¯ã»ã·ããªãã£ã®æåã奚å±ããã
çµè«
WCAG 2.1æºæ ã¯ãäžçäžã®å©çšè ã®ããã«ã¢ã¯ã»ã·ãã«ãªããžã¿ã«äœéšãåµåºããããã«äžå¯æ¬ ã§ããWCAG 2.1ã®ååãçè§£ãã广çãªãã¹ãæŠç¥ãå®è£ ããéçºã¯ãŒã¯ãããŒã«ã¢ã¯ã»ã·ããªãã£ãçµ±åããããšã§ãèœåã«é¢ããã誰ãããŠã§ããµã€ãã«ã¢ã¯ã»ã¹ã§ããããã«ããããšãã§ããŸããã¢ã¯ã»ã·ããªãã£ã¯åãªãã³ã³ãã©ã€ã¢ã³ã¹ã§ã¯ãªããããã€ã³ã¯ã«ãŒã·ãã§å ¬å¹³ãªããžã¿ã«äžçãåµé ããããšã§ããããšãå¿ããªãã§ãã ããã